//行事历编辑
import React, {Component} from 'react'
import {View, Text, WebView, Button, TextInput, TouchableOpacity} from 'react-native'
import DateTimePicker from 'react-native-modal-datetime-picker'
import Loading from '../common/loading'
import styles from "../../configs/styles";
import {I18n} from "../../configs/enumeration";
import {EditPlanApi, UpdatePlanApi} from "../../configs/api";
import FormatDate from "../../helpers/dateFormat";
import FormatTime from "../../helpers/timeFormat";


class planEdit extends Component {

  static navigationOptions = ({navigation}) => {
    const {params} = navigation.state;
    if (params != undefined) {
      const _headerRight = (
        <View style={{flexDirection: 'row'}}>
          <TouchableOpacity onPress={params.updatePlan} style={{marginRight: 15}}>
            <Text style={{color: 'white', fontSize: 16}}>提交</Text>
          </TouchableOpacity>
        </View>
      );
      return {
        headerRight: _headerRight
      }
    }
  };

  constructor(props) {
    super(props);
    const params = props.navigation.state.params;
    this.state = {
      plan_id: params.plan_id,
      loading: false,
      pickingStartAt: false,
      pickingEndAt: false,
      title: '',
      content: '',
      address: '',
      startAt: '',
      endAt: '',
      afterUpdate: params.afterUpdate
    };
  }

  componentDidMount() {
    this.getData();
    this.props.navigation.setParams({
      updatePlan: this.updatePlan
    })
  }

  getData = () => {
    EditPlanApi(this.state.plan_id).then((data) => {
      this.setState({
        title: data.plan_attrs.title,
        content: data.plan_attrs.content,
        address: data.plan_attrs.address,
        startAt: data.plan_attrs.start_at,
        endAt: data.plan_attrs.end_at,
        loading: false
      })
    })
  };

  updatePlan = () => {
    plan_obj = {
      title: this.state.title,
      content: this.state.content,
      address: this.state.address,
      start_at: this.state.startAt,
      end_at: this.state.endAt,
    };
    UpdatePlanApi({plan_attrs: plan_obj, plan_id: this.state.plan_id}).then((response) => {
      this.state.afterUpdate();
      this.props.navigation.goBack()
    })
  };

  setStartAt = (date) => {
    this.setState({
      startAt: date,
      pickingStartAt: false
    })
  };

  setEndAt = (date) => {
    this.setState({
      endAt: date,
      pickingEndAt: false
    })
  };

  render() {
    const {loading} = this.state;
    if (loading) {
      return <Loading/>
    } else {
      return (
        <View style={{flexDirection: 'column'}}>
          <View style={{flexDirection: 'column', backgroundColor: 'white', paddingTop: 5}}>
            {/*title*/}
            <View style={{borderBottomWidth: 1, borderBottomColor: '#EFF0F1', margin: 10, paddingBottom: 10}}>
              <TextInput
                underlineColorAndroid="transparent"
                style={{}}
                placeholder={'请输入你要添加的安排'}
                onChangeText={(txt) => this.setState({title: txt})}
                value={this.state.title}
              />
            </View>
            {/*start_at*/}
            <TouchableOpacity onPress={() => {this.setState({pickingStartAt: true})}}>
              <View style={{flexDirection: 'row'}}>
                <View style={{margin: 10, flex: 1, flexDirection: 'row'}}>
                  <Text>开始</Text>
                  <Text style={{marginLeft: 20, color: '#5382F7'}}>{FormatDate(this.state.startAt)}</Text>
                </View>
                <View style={{margin: 10, paddingRight: 10, alignItems: 'flex-end'}}><Text style={{color: '#5382F7'}}>{FormatTime(this.state.startAt)}</Text></View>
              </View>
            </TouchableOpacity>
            <DateTimePicker
              isVisible={this.state.pickingStartAt}
              onConfirm={this.setStartAt}
              onCancel={() => this.setState({pickingStartAt: false})}
              date={new Date(this.state.startAt)}
              cancelTextIOS={'取消'}
              confirmTextIOS={'确定'}
              titleIOS={'选择开始时间'}
              mode={'time'}
            />
            {/*end_at*/}
            <TouchableOpacity onPress={() => {this.setState({pickingEndAt: true})}}>
              <View style={{flexDirection: 'row'}}>
                <View style={{margin: 10, flex: 1, flexDirection: 'row'}}>
                  <Text>结束</Text>
                  <Text style={{marginLeft: 20, color: '#5382F7'}}>{FormatDate(this.state.endAt)}</Text>
                </View>
                <View style={{margin: 10, paddingRight: 10, alignItems: 'flex-end'}}><Text style={{color: '#5382F7'}}>{FormatTime(this.state.endAt)}</Text></View>
              </View>
            </TouchableOpacity>
            <DateTimePicker
              isVisible={this.state.pickingEndAt}
              onConfirm={this.setEndAt}
              onCancel={() => this.setState({pickingEndAt: false})}
              date={new Date(this.state.endAt)}
              cancelTextIOS={'取消'}
              confirmTextIOS={'确定'}
              titleIOS={'选择结束时间'}
              mode={'time'}
            />
            {/*address*/}
            <View style={{flexDirection: 'row'}}>
              <View style={{margin: 10}}><Text>地点</Text></View>
              <View style={{margin: 10, paddingBottom: 10}}>
                <TextInput
                  underlineColorAndroid="transparent"
                  style={{}}
                  placeholder={'请输入日程地点'}
                  onChangeText={(txt) => this.setState({address: txt})}
                  value={this.state.address}
                />
              </View>
            </View>
          </View>
          {/*content*/}
          <View style={{flexDirection: 'column', backgroundColor: 'white', marginTop: 15}}>
            <View style={{margin: 10}}><Text>备注</Text></View>
            <View style={{margin: 10, paddingBottom: 10}}>
              <TextInput
                underlineColorAndroid="transparent"
                style={{}}
                placeholder={'请填写备注'}
                onChangeText={(txt) => this.setState({content: txt})}
                value={this.state.content}
              />
            </View>
          </View>
        </View>
      )
    }
  }
}

export default planEdit